<template>
  <div id="matchingFields" v-loading="Loding">
    <!-- <el-collapse accordion style="width: 60%" :value="1">
      <el-collapse-item :disabled="true" :name="1">
        <template slot="title">
          <div class="collapse_title">
            <div @click.stop="clickStop" style="width: 11%" class="input_div"><span>导入行号:</span> <el-input type="text" v-model="titleRowIndex" @input="rowIndexInput(titleRowIndex)" @change="rowIndexChange(titleRowIndex)"></el-input></div>
          </div>
        </template> -->
    <div class="rowIndex"><span>导入行号:</span> <el-input type="text" v-model="titleRowIndex" @input="rowIndexInput(titleRowIndex)" @change="rowIndexChange(titleRowIndex)"></el-input></div>
    <el-table :data="attributes" height="1100">
      <el-table-column label="导入表头名称">
        <template slot-scope="{ row }">
          <span><span style="color: red" v-if="row.isRequire">*</span> {{ row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="系统匹配字段（未匹配数据将不会导入）">
        <template slot-scope="{ row }">
          <!-- 点击时读取所有选中项 然后禁用选项 -->
          <el-select placeholder="请选择" v-model="row.systemAttribute" @focus="select" clearable filterable>
            <el-option-group v-for="group in systemAttribute" :key="group.tabName" :label="group.tabName">
              <el-option v-for="(item, index) in group.Columns" :key="item.id + '_' + index" :value="item.id" :label="item.name" :disabled="item.disabled">
                <div><span style="color: red" v-if="item.isRequire">*</span>{{ item.name }}</div>
              </el-option>
            </el-option-group>
          </el-select>
        </template>
      </el-table-column>
    </el-table>
    <!-- </el-collapse-item>
    </el-collapse> -->
  </div>
</template>
<script>
export default {
  name: "matchingFields",
  data() {
    return {
      //Excel字段
      attributes: [],
      //系统字段(下拉列表)
      systemAttribute: [],
      Loding: false,
      isEdit: {
        type: Boolean,
      },
      fileCacheKey: "",
      titleRowIndex: 1,
    };
  },
  props: {
    file: {
      type: Object,
    },
    moduleCode: {
      type: Number,
    },
    isSimple: {
      type: Boolean,
    },
  },
  methods: {
    clickStop() {},
    rowIndexChange(e) {
      if (!e) {
        this.titleRowIndex = 1;
        return;
      }
      this.$api.importUser.GetExcelSheetColumnNames({ TitleRowIndex: e, fileCacheKey: this.fileCacheKey }).then((res) => {
        if (res.data.status == 200) {
          let excelColumn = res.data.data;
          let tempColumn = [];
          excelColumn.forEach((item2, index2) => {
            var isRequire = item2.indexOf("*") > -1;
            var name = item2.replace("*", "");
            var systemAttribute = "";
            this.systemAttribute.forEach((element) => {
              if (!systemAttribute) {
                systemAttribute = element.Columns.filter((m) => m.name == name)[0]?.id;
              }
            });

            tempColumn.push({
              id: index2,
              name: name,
              isRequire: isRequire,
              systemAttribute: systemAttribute,
            });
          });
          this.attributes = tempColumn;
        }
      });
      this.$emit("setRowIndex", this.titleRowIndex);
    },
    rowIndexInput(e) {
      if (e) {
        var reg = /^([1-9]\d*)(\.\d*[1-9])?$/;
        if (!reg.test(e + "") && e == 0) {
          this.$message.warning("行号只能输入大于0的数字");
          this.titleRowIndex = 1;
        }
      }
    },
    //点击area2时,禁用下拉框的已选择项
    select() {
      //查找出所有被选中的选项
      var selectId = this.attributes.filter((m) => m.systemAttribute != "").map((m) => m.systemAttribute);
      selectId = selectId ? [...new Set(selectId)] : selectId;
      this.systemAttribute.forEach((element) => {
        element.Columns.forEach((column) => {
          if (selectId.indexOf(column.id) > -1) {
            column.disabled = true;
          } else {
            column.disabled = false;
          }
        });
      });
    },
    async getAttributes() {
      this.Loding = true;
      const formData = new FormData();
      formData.append("file", this.file.raw);
      await this.$api.importUser.GetImportColumns({ formData, moduleCode: this.moduleCode, isSimple: this.isSimple }).then((res) => {
        var data = res.data.data;
        console.log(data, "GetImportColumns");
        this.fileCacheKey = data.fileCacheKey;
        this.$emit("fileCacheKey", data.fileCacheKey);
        //重新组装系统字段
        var systemColumns = [];
        data.systemColumns.forEach((item, index) => {
          var systemColumn = {
            tabName: item.tabName,
            Columns: [],
          };
          item.columns.forEach((item2, index2) => {
            systemColumn.Columns.push({
              id: item2.columnid,
              name: item2.columnname,
              code: item2.columnCode,
              disabled: false,
              isRequire: item2.isRequired,
            });
          });
          systemColumns.push(systemColumn);
        });
        this.systemAttribute = systemColumns;

        //重新组装excel字段
        let excelColumn = [];
        data.excelColumns.forEach((item2, index2) => {
          var isRequire = item2.indexOf("*") > -1;
          var name = item2.replace("*", "");
          var systemAttribute = "";
          this.systemAttribute.forEach((element) => {
            if (!systemAttribute) {
              systemAttribute = element.Columns.filter((m) => m.name == name)[0]?.id;
            }
          });

          excelColumn.push({
            id: index2,
            name: name,
            isRequire: isRequire,
            systemAttribute: systemAttribute,
          });
        });
        this.attributes = excelColumn;

        console.log(this.systemAttribute, "this.systemAttribute");
        console.log(this.attributes, "this.attributes");
        this.Loding = false;
        // this.active++;
      });
    },
    getfield() {
      return {
        attributes: this.attributes,
        systemAttribute: this.systemAttribute,
      };
    },
  },
};
</script>
<style lang="less" scoped>
#matchingFields {
  width: 100%;
  height: 95%;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  .rowIndex {
    width: 100%;
    display: flex;
    flex-flow: row;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 5px;
    span {
      font-size: 12px;
    }
    :deep(.el-input) {
      width: 4%;
      .el-input__inner {
        padding: 0 !important;
        text-align: center;
      }
    }
  }
}
</style>
